<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电脑信息页面</title>
<link rel="stylesheet" href="../layui/css/layui.css" media="all">

<style>
.layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
	height: 34px;
	line-height: 34px;
	padding: 0 8px;
}
</style>
</head>
<body>
	<div class="layuimini-container">
		<div class="layuimini-main">
			<div class="layui-form" style="margin-top: 20px;" onsubmit="false">
				<div class="layui-form-item">
				
					
					<label class="layui-form-label">所属阅览室:</label>
						<div class="layui-input-inline" style="width: 120;">
							<select name="c_readrooms_id" id="c_readrooms_id" class="layui-input">
								<option value="">请选择所属阅览室</option>
								<option value="1">1号电脑房</option>
								<option value="2">2号电脑房</option>
							</select>
						</div>
					
					<button class="layui-btn" id="search" data-type="reload">搜索</button>
				</div>
			</div>
			<div>
				<table class="layui-hide" id="test" lay-filter="test"></table>
			</div>
		</div>
	</div>
	
	<script type="text/html" id="Tpl">
      {{#  if(d.c_readrooms_id == 1){ }}
          <span style="color: green;">1号电脑房</span>
      {{#  } else if(d.c_readrooms_id == 2){ }}
          <span style="color: orange;">2号电脑房</span>
      {{#  }  }}
  </script>
  
	<!-- 操作列 -->
	<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs" lay-event="editcomputers">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delcomputers">删除</a>
		</script>
    <script type="text/html" id="toolbarDemo">
      <!--表头上面引入了一个添加用户的操作-->
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addcomputers">添加</button>
      </div>
    </script>
	<script src="../layui/layui.js" charset="utf-8"></script>
	<script>
		layui.use([ 'form', 'table' ],  function() { //如果只加载一个模块，可以不填数组。如：layui.use('form')
			var table = layui.table; //获取table模块
			var form = layui.form;
			var $ = layui.jquery;
			// 渲染表格
			table.render({
				elem : '#test',
				url : '../getAllComputers',
				toolbar : '#toolbarDemo', //开启头部工具栏
				where : {
					method : 'getAll',
					c_readrooms_id : ''
				},
				method : 'POST',
				cols : [ [ {
					field : 'c_id',
					title : '电脑ID',
					fixed : 'left',
					align:'center',
					sort : true,
					width : 140,
				}, {
					field : 'c_name',
					title : '电脑名称',
					align:'center',
					width : 140,
				}, {
					field : 'c_no',
					title : '电脑编号',
					align:'center',
					width : 160,
				}, {
					field : 'c_readrooms_id',
					title : '电脑所属阅览室',
					templet : '#Tpl',
					align:'center',
					width : 140,
				}, {
					title : '操作',
					fixed : 'right',
					align : 'center',
					toolbar : '#barDemo',
					width : 150
				} ] ],
				id : 'testReload',
				page : true
			});
			$('#search').on('click', function() {
				var c_readrooms_id = $("#c_readrooms_id").val();
				table.reload('testReload', {
					where : {
						'c_readrooms_id' : c_readrooms_id
					}
				});
			});
			//监听提交按钮
			table.on('tool(test)', function(obj) {
				var data = obj.data;
				if (obj.event === 'delcomputers') {
					layer.confirm('真的删除该电脑的基本信息吗?', function(index) {
						console.log(obj.data);
						var url = '../deleteComputers';
						$.post(url, {
							"c_id" : obj.data.c_id,
							method : 'delete'
						}, function(data) {
							if (data.count > 0) {
								console.log('删除成功');
								window.location.reload();
							}
						}, "json");
					});
				} else if (obj.event === 'editcomputers') {
					console.log(obj.data);
					layer.open({ //打开一个页面
						type : 2, //在当前的页面之上，弹框形式，展示出添加用户的界面
						area : [ '600px', '500px' ], //页面的宽高
						content : 'computers_edit.html', //页面所在的位置
						title : '编辑电脑基本信息',
						fix:false,
						maxmin:true,
						success : function(layero, index) {
							console.log(obj.data);
							var body = layer.getChildFrame('body', index);
							body.contents().find("#c_id").val(obj.data.c_id);
							body.contents().find("#c_name").val(obj.data.c_name);
							body.contents().find("#c_no").val(obj.data.c_no);
							body.contents().find("#c_readrooms_id").val(obj.data.c_readrooms_id);
							body.contents().find("#ext1").val(obj.data.ext1);
							body.contents().find("#ext2").val(obj.data.ext2);
						},
						end : function() {
							window.location.reload();
						}
					});
				}
			});
			table.on('toolbar(test)', function(obj) {
				switch (obj.event) {
				case 'addcomputers':
					layer.open({
						type : 2,
						area : [ '600px', '500px' ], //页面的宽高
						content : 'computers_add.html',
						title : '添加电脑基本信息',
						fix:false,
						maxmin:true,
						end : function() {
							window.location.reload();
						}
					});
					break;
				}
				;
			});
		});
		layui.use('laydate', function() {
			var laydate = layui.laydate;
			//同时绑定多个时间选择器
			laydate.render({
				elem : '#begintime',
				type : 'datetime'
			});
			laydate.render({
				elem : '#endtime',
				type : 'datetime'
			});
		});
	</script>
</body>
</html>